<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>志愿者信息管理</title>
		<link rel="stylesheet" href="../../../lib/element-ui/theme-chalk/index.css">
		<link rel="stylesheet" href="../../../lib/vxe-table/index.css">
		<link rel="stylesheet" href="../../../lib/vxe-table-plugin-element/style.css">
		<link rel="stylesheet" href="../../../lib/font-awesome/css/font-awesome.min.css">
		<script type="text/javascript" src="../../../lib/vue/vue.js"></script>
		<script type="text/javascript" src="../../../lib/xe-utils/xe-utils.js"></script>
		<script type="text/javascript" src="../../../lib/element-ui/index.js"></script>
		<script type="text/javascript" src="../../../lib/vxe-table/index.js"></script>
		<script type="text/javascript" src="../../../lib/vxe-table-plugin-element/index.js"></script>
		<script type="text/javascript" src="../../../lib/xlsx/xlsx.full.min.js"></script>
		<script type="text/javascript" src="../../../lib/vxe-table-plugin-export-xlsx/index.min.js"></script>
		<script type="text/javascript" src="../../../lib/xe-ajax/xe-ajax.js"></script>
		<script type="text/javascript" src="../../../static/js/jquery.min.js"></script>
		<script type="text/javascript" src="../../../static/js/webApi.js"></script>
		<style type="text/css">
			html,
			body,
			#app,
			.el-container {
				padding: 0px;
				margin: 0px;
				height: 100%;
			}

			.el-main {
				padding: 4px;
			}

			.class001>input {
				text-align: center;
			}

			.el-dialog__body {
				padding: 10px;
			}

			[v-cloak] {
				display: none;
			}
		</style>
	</head>

	<body>
		<el-container id="app">
			<el-main v-cloak>
				<el-form :inline="true" :model="queryData" ref="queryData" label-width="100px" label-position="right"
					size="mini" style="height: 35px;">
					<el-form-item label="志愿者姓名">
						<el-input placeholder="请输入志愿者姓名" v-model="queryData.volunteerName" clearable>
						</el-input>
					</el-form-item>
					<el-form-item label="所属行业">
						<el-select v-model="queryData.industry" clearable filterable placeholder="请选择所属行业">
							<el-option v-for="item in industry_options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="政治面貌">
						<el-select v-model="queryData.politics" clearable filterable placeholder="请选择政治面貌">
							<el-option v-for="item in political_options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button icon="el-icon-refresh-left" @click="reset">重置
						</el-button>
						<el-button type="primary" icon="el-icon-search" @click="inquire">查询
						</el-button>
					</el-form-item>
				</el-form>

				<vxe-grid border ref="xGrid" resizable show-overflow highlight-current-row="true" keep-source stripe
					@page-change="handlePageChange" :height="tableHeight" size="mini" :checkbox-config="tableRadio"
					:toolbar="tableToolbar" :pager-config="tablePage" :loading="dataLoading"
					@cell-dblclick="cellDBLClickEvent" :edit-config="{trigger:'click', mode:'row'}"
					:header-cell-style="{'text-align':'center'}" @toolbar-button-click="toolbarButtonClickEvent"
					:data="tableData" :sort-config="{remot:true}">
					<vxe-table-column type="checkbox" width="60" align="center" fixed="left"></vxe-table-column>
					<vxe-table-column field="userName" title="志愿者姓名" width="120" align="center" fixed="left">
					</vxe-table-column>
					<vxe-table-column field="sex" title="性别" width="60" align="center">
					</vxe-table-column>
					<vxe-table-column field="age" title="年龄" width="60" align="center">
					</vxe-table-column>
					<vxe-table-column field="education" title="学历" width="60" align="center">
					</vxe-table-column>
					<vxe-table-column field="industry" title="从事行业" width="120" align="center">
					</vxe-table-column>
					<vxe-table-column field="realAccNbr" title="联系电话" width="170" align="center">
					</vxe-table-column>
					<vxe-table-column field="political" title="政治面貌" width="120" align="center">
					</vxe-table-column>
					<vxe-table-column field="unit" title="公司/单位名称" width="200" align="center">
					</vxe-table-column>
					<vxe-table-column field="positionHeld" title="职位" width="120" align="center">
					</vxe-table-column>
					<vxe-table-column field="companyIntroduction" title="公司/单位介绍" align="left">
					</vxe-table-column>
					<vxe-table-column field="cTime" title="创建时间" width="180" align="center">
					</vxe-table-column>
				</vxe-grid>
			</el-main>

			<vxe-modal ref="xModal" v-model="showModal" :title="selectRow ? '编辑&保存' :'新增&保存'" width="850" resize
				destroy-on-close @close="closeEvent('submitForm')">
				<el-form v-loading="submitLoading" :model="submitForm" :rules="formRules" ref="submitForm"
					label-width="120px" label-position="right" size="mini">
					<el-row>
						<el-col span="12">
							<el-form-item label="志愿者姓名" prop="userName">
								<el-input placeholder="请输入志愿者姓名" v-model="submitForm.userName" clearable
									style="width:90%">
							</el-form-item>
						</el-col>
						<el-col span="12">
							<el-form-item label="性别" prop="sex">
								<el-select v-model="submitForm.sex" placeholder="请选择性别" style="width:90%">
									<el-option v-for="item in sex_options" :key="item.value" :label="item.label"
										:value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col span="12">
							<el-form-item label="年龄" prop="age">
								<el-input placeholder="请输入年龄" v-model.number="submitForm.age" autocomplete="off"
									clearable style="width:90%">
							</el-form-item>
						</el-col>
						<el-col span="12">
							<el-form-item label="学历" prop="education">
								<el-select v-model="submitForm.education" placeholder="请选择学历" style="width:90%">
									<el-option v-for="item in education_options" :key="item.value" :label="item.label"
										:value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col span="12">
							<el-form-item label="政治面貌" prop="political">
								<el-select v-model="submitForm.political" placeholder="请选择政治面貌"
									@change="political_change" style="width:90%">
									<el-option v-for="item in political_options" :key="item.value" :label="item.label"
										:value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col span="12">
							<el-form-item label="联系电话" prop="realAccNbr">
								<el-input placeholder="请输入联系电话" v-model="submitForm.realAccNbr" clearable
									style="width:90%">
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col span="24">
							<el-form-item label="公司/单位名称" prop="unit">
								<el-input placeholder="请输入公司/单位名称" v-model="submitForm.unit" clearable
									style="width:96%">
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col span="12">
							<el-form-item label="所属行业" prop="industry">
								<el-select v-model="submitForm.industry" placeholder="请选择所属行业" @change="industry_change"
									style="width:90%">
									<el-option v-for="item in industry_options" :key="item.value" :label="item.label"
										:value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col span="12">
							<el-form-item label="职位" prop="positionHeld">
								<el-input placeholder="请输入职位" v-model="submitForm.positionHeld" clearable
									style="width:90%">
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col>
							<el-form-item label="公司/单位介绍" prop="companyIntroduction">
								<el-input placeholder="请输入公司/单位介绍" v-model="submitForm.companyIntroduction"
									:autosize="{ minRows: 4, maxRows: 8 }" type="textarea" show-word-limit clearable
									style="width:96%">
							</el-form-item>
						</el-col>
					</el-row>
					<el-form-item style="height:auto;padding:4px 20px;text-align: right;">
						<el-button type="primary" icon="el-icon-folder" @click="submitEvent('submitForm')"
							:disabled="disabled" v-cloak>保存</el-button>
						<el-button type="warning" icon="el-icon-refresh" @click="resetEvent('submitForm')" v-cloak>
							重置
						</el-button>
						<el-button type="warning" icon="el-icon-switch-button" @click="closeEvent('submitForm')"
							v-cloak>
							退出
						</el-button>
					</el-form-item>
				</el-form>
			</vxe-modal>
		</el-container>
	</body>

	<script>
		window.onload = function() {
			var main = {
				data() {
					return {
						tableHeight: '100%',
						queryData: {
							volunteerName: '',
							industry: '',
							politics: ''
						},
						tableRadio: {
							trigger: 'row',
							highlight: true
						},
						tableToolbar: {
							id: 'toolbar',
							size: 'mini',
							perfect: true,
							buttons: [{
								code: 'add',
								name: '新增',
								icon: 'fa fa-plus vxe-primary-color'
							}, {
								code: 'update',
								name: '编辑',
								icon: 'fa fa-edit vxe-primary-color'
							}, {
								code: 'del',
								name: '删除',
								icon: 'fa fa-trash vxe-primary-color'
							}, ],
						},
						tablePage: {
							perfect: true,
							total: 0,
							currentPage: 1,
							pageSize: 30,
							align: 'left',
							pageSizes: [30, 50, 100, 200],
							layouts: [
								'Sizes',
								'PrevJump',
								'PrevPage',
								'Number',
								'NextPage',
								'NextJump',
								'FullJump',
								'Total'
							]
						},
						dataLoading: false,
						tableData: [],
						showModal: false,
						submitForm: {
							userName: "",
							sex: "", //性别
							age: "", //年龄
							education: "", //学历
							industry: "", //所属行业
							industryCode: "", //所属行业编码
							realAccNbr: "", //联系电话
							political: "", //政治面貌名称
							politicalCode: "", //政治面貌编码
							unit: "", //单位
							//unitCode: "",//单位编码
							positionHeld: "", //所任职务
							companyIntroduction: "", //企业、单位介绍
							// state: "",//状态：0失效 1有效
							// userId: "",//用户ID
							// volunteerId: ""//志愿者ID
						},
						formRules: {
							userName: [{
								required: true,
								message: '请输入名称'
							}],
							sex: [{
								required: true,
								message: '请选择名称'
							}],
							age: [{
								required: true,
								message: '请输入年龄'
							}, {
								type: 'number',
								message: '年龄必须为数字值'
							}],
							education: [{
								required: true,
								message: '请选择学历'
							}],
							unit: [{
								required: true,
								message: '请填写公司/单位名称'
							}],
							realAccNbr: [{
								required: true,
								message: '请填写电话'
							}, {
								pattern: /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/,
								message: '手机号不正确',
								trigger: ['blur', 'change']
							}],
							political: [{
								required: true,
								message: '请选择政治面貌'
							}],
						},
						formLabelWidth: '80px',
						selectRow: 0,
						submitLoading: false,
						disabled: false,
						sex_options: [],
						education_options: [],
						industry_options: [],
						political_options: [],
						chooseData: []
					}
				},
				created() {
					this.getDictInfo_sex();
					this.getDictInfo_education();
					this.getDictInfo_politicalStatus();
					this.getDictInfo_industry();
					this.getVolunteerList();
				},
				mounted() {
					this.tableHeight = window.innerHeight - this.$refs.xGrid.$el.offsetTop - 75;
				},
				methods: {
					reset() {
						this.queryData = {
							volunteerName: '',
							industry: '',
							politics: ''
						}
					},
					inquire() {
						this.getVolunteerList();
					},
					handlePageChange() {

					},
					cellDBLClickEvent({
						row,
						rowIndex,
						$rowIndex,
						column,
						columnIndex,
						$columnIndex,
						$event
					}) {
						if (columnIndex > 1) {
							this.editEvent(row);
						}
					},
					toolbarButtonClickEvent({
						code
					}, event) {
						let self = this;
						switch (code) {
							case 'add':
								this.selectRow = 0;
								this.submitForm = {
										userName: "",
										sex: "", //性别
										age: "", //年龄
										education: "", //学历
										industry: "", //所属行业
										industryCode: "", //所属行业编码
										realAccNbr: "", //联系电话
										political: "", //政治面貌名称
										politicalCode: "", //政治面貌编码
										unit: "", //单位
										//unitCode: "",//单位编码
										positionHeld: "", //所任职务
										companyIntroduction: "" //企业、单位介绍
									},
									this.showModal = true;
								break;
							case 'update':
								if (this.$refs.xGrid.getCheckboxRecords().length == 1) {
									let row = this.$refs.xGrid.getCheckboxRecords()[0];
									this.submitForm.userName = row.userName;
									this.submitForm.sex = row.sex;
									this.submitForm.age = row.age;
									this.submitForm.education = row.education;
									this.submitForm.industry = row.industry;
									this.submitForm.industryCode = row.industry;
									this.submitForm.realAccNbr = row.realAccNbr;
									this.submitForm.political = row.political;
									this.submitForm.politicalCode = row.political;
									this.submitForm.unit = row.unit;
									this.submitForm.positionHeld = row.positionHeld;
									this.submitForm.companyIntroduction = row.companyIntroduction;
									this.submitForm['id'] = row.id
									this.selectRow = 1;
									this.showModal = true;
								} else if (this.$refs.xGrid.getCheckboxRecords().length > 1) {
									this.$message({
										message: "只能选择一条数据！",
										type: 'warning',
										center: true
									});
								} else {
									this.$message({
										message: "请至少选择一行数据",
										type: 'warning',
										center: true
									});
								}
								break;
							case 'del':
								let del_row = this.$refs.xGrid.getCheckboxRecords();
								if (del_row.length > 0) {
									let names = "";
									let ids = [];
									del_row.forEach(list => {
										names += list.userName + '、';
										ids.push(list.id)
									});
									names = names.substring(0, names.length - 1)
									this.$confirm('确认要删除' + names + '这' + del_row.length + '条志愿者的信息吗?', '提示', {
										confirmButtonText: '确定',
										cancelButtonText: '取消',
										type: 'warning'
									}).then(() => {
										webApi("/volunteer/del?ids=" + ids, "get", {}, function(res) {
											if (res.code == 200) {
												self.$message({
													type: 'success',
													message: '删除成功!'
												});
												self.getVolunteerList();
											} else {
												self.$XModal.message({
													message: res.msg,
													status: 'error'
												})
											}
										}, function(error) {
											self.$XModal.message({
												message: error,
												status: 'error'
											})
										});
									}).catch(() => {

									});
								} else {
									this.$message({
										message: "请选择需要删除的数据行",
										type: 'warning',
										center: true
									});
								}
								break;
						}
					},
					getDictInfo_sex() {
						let self = this;
						const params = {
							dictId: '10'
						};
						webApi("/dict/getDictDetailTreeList", "post", params, function(res) {
							if (res.code == 200) {
								self.sex_options = res.data;
							}
						}, function(error) {
							self.$XModal.message({
								message: error,
								status: 'error'
							})
						});
					},
					getDictInfo_education() {
						let self = this;
						const params = {
							dictId: '11'
						};
						webApi("/dict/getDictDetailTreeList", "post", params, function(res) {
							if (res.code == 200) {
								self.education_options = res.data;
							}
						}, function(error) {
							self.$XModal.message({
								message: error,
								status: 'error'
							})
						});
					},
					getDictInfo_politicalStatus() {
						let self = this;
						const params = {
							dictId: '12'
						};
						webApi("/dict/getDictDetailTreeList", "post", params, function(res) {
							if (res.code == 200) {
								self.political_options = res.data;
							}
						}, function(error) {
							self.$XModal.message({
								message: error,
								status: 'error'
							})
						});
					},
					getDictInfo_industry() {
						let self = this;
						const params = {
							dictId: '24'
						};
						webApi("/dict/getDictDetailTreeList", "post", params, function(res) {
							if (res.code == 200) {
								self.industry_options = res.data;
							}
						}, function(error) {
							self.$XModal.message({
								message: error,
								status: 'error'
							})
						});
					},
					getVolunteerList() {
						let self = this;
						this.dataLoading = true;
						const params = {
							age: "", //年龄
							cTime: "", //创建时间
							companyIntroduction: "", //企业、单位介绍
							ctime: "", //学历
							education: "", //学历
							industry: this.queryData.industry, //所属行业
							industryCode: "", //所属行业编码
							page: this.tablePage.currentPage,
							political: this.queryData.politics, //政治面貌名称
							politicalCode: "", //政治面貌编码
							positionHeld: "", //所任职务
							realAccNbr: "", //联系电话
							rows: this.tablePage.pageSize,
							sex: "", //性别
							state: "", //状态：0失效 1有效
							unit: "", //单位
							unitCode: "", //单位编码
							userId: "", //用户ID
							volunteerId: "", //志愿者ID
							userName: this.queryData.volunteerName
						};
						webApi("/volunteer/list", "post", params, function(res) {
							if (res.code == 200) {
								self.tablePage.total = res.data.total;
								self.tableData = res.data.list;
								self.dataLoading = false;
							} else {
								self.dataLoading = false;
								self.$XModal.message({
									message: res.msg,
									status: 'error'
								})
							}
						}, function(error) {
							self.dataLoading = false;
							self.$XModal.message({
								message: error,
								status: 'error'
							})
						});
					},
					industry_change(result) {
						this.submitForm.industryCode = result;
					},
					political_change(result) {
						this.submitForm.politicalCode = result;
					},
					submitEvent(formName) {
						// console.log(this.submitForm)
						this.$refs[formName].validate((valid) => {
							if (valid) {
								this.submitLoading = true;
								this.disabled = true;
								let self = this;
								webApi('//volunteer/save', 'post', this.submitForm, function(data) {
									self.submitLoading = false;
									self.disabled = false;
									if (data.code == 200) {
										self.$message({
											message: data.msg,
											type: 'success',
											center: true
										});
										self.getVolunteerList();
										self.showModal = false;
										self.$refs[formName].resetFields();
									} else {
										self.$message({
											message: data.msg,
											type: 'error',
											center: true
										});
									};
								}, function(xhr, type, errorThrown) {
									self.submitLoading = false;
									self.disabled = false;
								})

							} else {
								this.$XModal.message({
									message: "请填写带*的信息",
									status: 'error'
								});
								return false;
							}
						});
					},
					resetEvent(formName) {
						this.$refs[formName].resetFields();
					},
					closeEvent(formName) {
						this.showModal = false;
						this.$refs[formName].resetFields();
					},
				}
			};
			var vue = Vue.extend(main);
			new vue().$mount('#app');
		}
	</script>

</html>